<template>
    <div>
          <!-- 导航区域 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
          </el-breadcrumb>



            <!-- 搜索框 -->
            <el-row :gutter="20">
            <el-col :span="8">
                <el-input placeholder="请输入内容"  clearable >
                <el-button slot="append" icon="el-icon-search" > </el-button>
                </el-input>
            </el-col>
           </el-row>



          <!-- 订单列表  -->
          <el-table :data="orderList" border>
            <el-table-column type="index" label="#" width="60"> </el-table-column>
            <el-table-column prop="order_number" label="订单编号" width="400px"> </el-table-column>
            <el-table-column prop="order_price" label="订单价格" width="110px"> </el-table-column>
            <el-table-column prop="pay_status" label="是否付款" width="120px">
                <template slot-scope="scope">
                  <el-button type="danger" plain size="small" v-if="scope.pay_status === 1">已付款</el-button>
                  <el-button type="danger" plain size="small" v-else>未付款
                  </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="trade_no" label="是否发货" width="110px">
                  <template slot-scope="scope">
                    <span v-if="scope.pay_status === 1"> 是</span>
                    <span v-else>否</span>
                  </template>
            </el-table-column>
            <el-table-column prop="create_time" label="下单时间" width="180px"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle class="elbutton" @click = cityEditBtns></el-button>
                <el-button type="success" icon="el-icon-check" circle @click="logisticsProgress"></el-button>
              </template>
            </el-table-column>
          </el-table>


           <!-- 分页功能 -->
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
             :current-page="queryinfo.pagenum" :page-sizes="[3, 7, 10]" :page-size="queryinfo.pagesize"
             layout="total, sizes, prev, pager, next, jumper" :total="total">
           </el-pagination>


           <!-- 编辑按钮弹出框 -->
           <el-dialog title="修改地址" :visible.sync="cityDialogVisible" width="40%" >
              <el-form :model="cityChoose" :rules="cityRules" ref="cityRuleForm" label-width="100px">
                  <el-form-item label="省市区/县" prop="name1">
                  <!-- 级联选择器 -->
                  <el-cascader v-model="cityChoose.name1" :options="cityData" expandTrigger='hover'></el-cascader>
                  </el-form-item>
                  <el-form-item label="详细地址" prop="name2">
                    <el-input v-model="cityChoose.name2"></el-input>
                  </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                 <el-button  @click="closeDialogVisible">取 消</el-button>
                 <el-button type="primary"  @click="closeDialogVisible">确 定
                 </el-button>
              </span>
           </el-dialog>


           <!-- 物流进度查询 -->
           <el-dialog title="物流查询" :visible.sync="logisticsDialogVisible" width="30%">
             <span>这是一段信息</span>
             <span slot="footer" class="dialog-footer">
               <el-button @click="logisticsDialogVisible = false">取 消</el-button>
               <el-button type="primary" @click="logisticsDialogVisible = false">确 定</el-button>
             </span>
           </el-dialog>
    </div>
</template>




<script>
import cityData from './citydata.js'

export default {
    data(){
        return {
            queryinfo:{
                query:'',
                pagenum:1,
                pagesize:7
            },
            orderList:[],
            total:0,
            cityDialogVisible:false,
            logisticsDialogVisible:false,
            cityChoose:{
                name1:[],
                name2:[],
            },
            cityRules:{
                name1:[
                     {required: true, message: '请输入所在县市区/县', trigger: 'blur'},
                ],
                name2:[
                {required: true, message: '请输入所在县市区/县', trigger: 'blur'},
                ],
            },
            cityData: cityData,
            progressInfo:[]
        }
    },



    created(){
       this.getOrderList()
    },




    methods:{
       async getOrderList(){
          const {data:res} = await this.$http.get('/orders',{
            params: this.queryinfo
            })
             this.orderList = res.data.goods
             this.total = res.data.total
        },

        handleSizeChange(newSize){
            this.queryinfo.pagesize = newSize
            this.getOrderList()
        },


        handleCurrentChange(newPag){
            this.queryinfo.pagenum = newPag
            this.getOrderList()
        },


        // 编辑按钮弹出框
        cityEditBtns(){
            this.cityDialogVisible = true
        },


        // 关闭选择城市弹窗，进行重置内容
        closeDialogVisible(){
            this.cityDialogVisible = false
            this.$refs.cityRuleForm.resetFields()
        },

        
        // 物流进度查询
       async logisticsProgress(){
            this.logisticsDialogVisible = true
            const{data:res} = await this.$http.get('/kuaidi/1106975712662')

            if(res.meta.status !== 200){
                return this.$message.error('查询失败')
            }
                this.progressInfo = res.data
                console.log( this.progressInfo);
        },



        
    }
}
</script>





<style lang="less" scoped>
    .elbutton {
        margin-right: 10px;
    }
</style>